<template>
  <view  class="sort-box" :class="show?'show':''">
    <view style="margin-bottom: 10px;">
      <bar-title bgColor="bg-white" :isBack="false" >
        <block slot="content">分类</block>
      </bar-title>
    </view>

    <view class="VerticalBox">
      <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
        <block v-for="(item,index) in list" :key="index">
          <view class="cu-item" :class="index==tabCur?'text-blue cur':''" @tap="TabSelect(item,$event)" :data-id="index">
            <view :class="index==tabCur?'text-black text-bold':''">{{item.name}}</view>
          </view>
        </block>
      </scroll-view>

      <scroll-view class="VerticalMain" scroll-y scroll-with-animation :scroll-into-view="'main-'+mainCur" >
        <block v-for="(item,index) in list" :key="index" >
          <view class="padding-top padding-lr" :id="'main-'+index" :class="index != tabCur ? 'none':''">
            <!--标题栏-->
            <view class="cu-bar bg-white">
              <view class="action">
                <text class="cuIcon-title text-blue"/>
                <text>{{item.name}}</text>
              </view>
            </view>

            <!--图标导航-->
            <view class="grid-icon-box">
              <view class="cu-list grid col-3 no-border">
                <block v-for="(items,indexs) in sortList" :key="indexs" >
                  <view class="cu-item" @click="navToList(items)">
                    <view class="grid-icon">
                      <image class="icon" :src="imgUrl+items.img" lazy-load mode="widthFix"/>
                    </view>
                    <text class="text-black">{{items.name}}</text>
                  </view>
                </block>
              </view>
            </view>

          </view>
        </block>
      </scroll-view>
    </view>

  </view>
</template>

<script>

import { mapState } from 'vuex'
import barTitle from "./bar-title";
export default {
  components: {
    barTitle
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    scrollY: {
      type: Number,
      default: 0
    },
    scrollBottom: {
      type: Number,
      default: 0
    },
    sortId:{
      type: Number,
      default: 0
    }
  },
  computed:{
    ...mapState(['imgUrl'])
  },
  data(){
    return{
      verticalNavTop:0,
      list: [],
      tabCur: 0,
      mainCur: 0,
      sortList:[],
      idCur:0,
    }
  },
  created(){
    this.$api.getMold().then((res)=>{
      if(res.data.code == 0){
        this.list = res.data.data;
        if(this.sortId != 0) {
          this.idCur = this.sortId;
          this.getIdCur();
        }else{
          this.idCur = this.list[0].id;
          this.getMoldTwo();
        }
      }
    })

  },
  watch: {
    scrollY() {
      //通知他妈的滚动了。
      this.setPageScroll(this.scrollY);
    },
    scrollBottom() {
      if(this.scrollBottom != 0) {
        //通知他妈的触底了
        this.setReachBottom();
      }
    },
    sortId(){
      this.sortList = [];
      this.getIdCur();
    }
  },
  methods:{
    navToList(item){
      uni.navigateTo({
        url: "/sub_pages/home/search?mold_id="+this.idCur+"&brand_id="+item.id+"&name="+item.name
      });
    },
    //根据id获取需要选中的数据
    getIdCur(){
      this.idCur = this.sortId;
      this.list.forEach((item,index)=>{
        if(item.id == this.idCur){
          this.tabCur = index;
          this.mainCur = index;
          this.verticalNavTop = (index - 1) * 50
          this.getMoldTwo();
        }
      })
    },
    getMoldTwo(){
      this.$api.getMoldTwo({mold_id:this.idCur}).then((res)=>{
        if(res.data.code == 0){
          this.sortList = res.data.data;
        }
      })
    },
    //页面被滚动
    setPageScroll(scrollTop) {
    },
    //触底了
    setReachBottom() {
      console.log('触底了');
    },
    searchTap() {
      console.log('搜索')
      uni.navigateTo({
        url: "/sub_pages/home/search"
      });
    },
    TabSelect(item,e) {
      this.tabCur = e.currentTarget.dataset.id;
      this.mainCur = e.currentTarget.dataset.id;
      this.idCur = item.id;
      this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
      this.getMoldTwo();
    },

  }
}
</script>
<style lang="scss">
.sort-box {
  display: none;
}
.sort-box.show {
  display: block;
}
.bg-top{
  top:var(--status-bar-height);
}
page {
  background-color: #FFFFFF;
}
.none{
  display: none;
}

.bar-search-title-box {
  .cu-bar {
    padding-top: var(--status-bar-height);
    min-height: calc(var(--status-bar-height) + 80rpx);
    .content {
      top: var(--status-bar-height);

      /* #ifndef MP */
      left: 18.18rpx;
      width: calc(100% - 127.27rpx);
      /* #endif */

      /* #ifdef MP */
      left: 70rpx;
      width: calc(100% - 350rpx);
      /* #endif */

      .search-form {
        display: inherit;
        flex: inherit;
        margin: 0;
        color: #717171;
        [class*="cuIcon-"] {
          margin: 0;
        }
      }
    }
  }
  .cu-bar.fixed.no-shadow {
    box-shadow: inherit;
  }
  .cu-bar.bg-white {
    color: #333333;
  }
  .seat-height {
    width: 100%;
    height: calc(var(--status-bar-height) + 128rpx);
  }
}

.VerticalNav.nav {
  width: 200upx;
  color: #666666;
  height: calc(100vh - (var(--status-bar-height) + 251rpx));
  white-space: initial;
}

.VerticalNav.nav .cu-item {
  width: 100%;
  text-align: center;
  background-color: #FAFAFA;
  margin: 0;
  border: none;
  height: 50px;
  position: relative;
}

.VerticalNav.nav .cu-item.cur {
  background-color: #FFFFFF;
}

.VerticalNav.nav .cu-item.cur::after {
  content: "";
  width: 7.27rpx;
  height: 32.72rpx;
  border-radius: 0px 9.09rpx 9.09rpx 0px;
  position: absolute;
  background-color: currentColor;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.VerticalBox {
  display: flex;
}

.VerticalMain {
  background-color: #FFFFFF;
  height: calc(100vh - (var(--status-bar-height) + 251rpx));
  flex: 1;
}

.grid-icon-box {
  position: relative;
  width: 100%;
  .cu-list.grid {
    background-color: inherit;
    .grid-icon {
      margin: 0;
      .icon {
        width: 100rpx;
      }
    }
  }
  .cu-list.grid>.cu-item {
    padding-bottom: 9.09rpx;
    text {
      color: #333333;
    }
  }
  .cu-list.grid.no-border {
    padding: 0;
  }
}

</style>